<template>
  <div class="navigation">
    <div class="navigation__list">
      <router-link
        class="navigation__list--item"
        v-for="(it, index) in $store.state.nav"
        :key="index"
        :to="it.path"
      >
        <i :class="['iconfont', 'icon-' + it.meta.icon]"></i>
        <div>{{ it.meta.title }}</div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "nav",
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
@include b(navigation) {
  width: 100%;
  height: 100%;
  background: $background-color-nav;
  @include e(list) {
    @include m(item) {
      width: 100%;
      height: 60px;
      display: flex;
      flex-direction: row;
      align-items: center;
      color: $text-color-nav;
      font-size: 14px;
      i {
        font-size: 20px;
        margin-left: 20px;
      }
      div {
        margin-left: 10px;
        cursor: default;
      }
      &:hover {
        background-color: #263445 !important;
      }
    }
  }
}
</style>
